<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue基础和循环</title>
</head>
<body>

<div id="box">
    {{msg}}
    <br>
    {{msg2}}
    <br>
    <input type="text" v-model="msg">
    <input type="text" v-model="msg">
    <!--注意input绑定时必须要在new Vue中el选择器的元素里面如input在#box的内部-->
</div>
<ul>
    <li v-for="item in fruit">{{item}}</li>
    <hr>
    <!--循环事件的使用在要循环的对象中添加 v-for='name in arr' 再绑定{{name}}-->
    <li v-for="item in json">{{$index+1}} :{{item}}-->{{$key}}</li>
    <!--当循环体是json对象的时候,可以用{{$key}}找到json对象的key值.用{{$index}}可以找到数组元素或者json对象元素的下标-->
    <hr>
    <li v-for="(k,v) in json">{{}}</li>
</ul>
</body>
</html>
<!--小的项目可以不搭环境,直接引入vue.js进行使用.搭环境的目的是将用到文件打包导入环境是在node下配置的-->
<script src="vue.js"></script>
<script type="text/javascript">
    //    window.onload是一个事件，当文档加载完成之后就会触发该事件.
    //vue的使用是通过new一个Vue开始的,可以用变量接受
    //window.onload=function () {
    //  var vm=  new Vue({
    //        el:'#box',el是element(元素的简写)选择器.data是要展示的数据,用对象的方式存储在HTML中用{{msg}}展示内容,事件的绑定的时候不用{{}}
    //        data:{
    //            msg:'welcome vue'
    //        }
    //    })
    //}
    window.onload = function () {
        new Vue({
            el: 'body',
            data: {
                msg: 'welcome vue',
                msg2:'我爱你',
                fruit:['apple','banana','orange','pear'],
                json:{a:'apple',b:'banana',c:'cherry',d:'date'}
            }
        })
    }
</script>